<template>
  <div>
    <b-card>
      <template #header>
        <b-button size="sm" v-b-modal.form>新建</b-button>
      </template>
      <b-table :fields="fields" :items="items">
        <template #cell(count)="{ item }">
          {{ item.assets }}
        </template>
        <template #cell(op)="{ item }">
            <b-button-group>
                <b-button @click="onItemClick(item)" size="sm" :to="{path: '/assets/details', query: {id: item.id}}">管理</b-button>
                <b-button @click="onItemClick(item)" size="sm">删除</b-button>
            </b-button-group>
        </template>
      </b-table>
    </b-card>
    <b-modal id="form" @ok="submit">
      <b-form>
        <b-form-group label="名称">
          <b-input v-model="form.name"></b-input>
        </b-form-group>
        <b-form-group label="描述">
          <b-textarea v-model="form.desc"></b-textarea>
        </b-form-group>
      </b-form>
    </b-modal>

  </div>
</template>

<script>
export default {
  data() {
    return {
      fields: [
        {
          key: "name",
          label: "名称",
        },
        {
          key: "count",
          label: "资源数量",
        },
        {
          key: "date",
          label: "创建日期",
        },
        {
          key: "desc",
          label: "描述",
        },
        {
          key: "op",
          label: "编辑",
        },
      ],
      items: [],
      form: {
        name: "",
        desc: "",
      },
    };
  },
  methods: {
    submit() {
      this.$haier.post("admin/customer/assets", this.form).then(() => {
          this.loadAssets()
      });
    },
    loadAssets() {
      this.$haier.get("admin/customer/assets").then(({ data }) => {
        this.items = data;
      });
    },
    onItemClick(item) {
        console.log(item)
    },
  },
  created() {
    this.loadAssets();
  },
  
};
</script>

<style lang="scss" scoped>
</style>